const user_event_preview = {
    template:`
                <div>
                <div class="my-3">
                    <router-link :to="{name:'user.event.index'}" class="text-primary">Events</router-link> /
                    <span class="text-uppercase">{{event_code}}</span>
                </div>
                <div class="row border-bottom pb-4 mx-1">
                    <div class="col-3 p-0">
                        <img :src="event.photo" class="w-100">
                    </div>
                    <div class="col-8">
                        <table class="table table-bordered table-sm">
                            <thead>
                            <tr><th colspan="2" class="h2">{{event.name}}</th></tr>
                            </thead>
                            <tbody>
                            <tr><td>Address</td><td>{{event.address}}</td></tr>
                            <tr><td>Date</td><td>{{event.date}}</td></tr>
                            <tr><td>Type</td><td>{{event.type}}</td></tr>
                            <tr v-if="!is_more"><td>Corporate Name</td><td>{{event.corporate_name}}</td></tr>
                            <tr v-else><td>Permission</td><td>{{event.permission}}</td></tr>
                            </tbody>
                        </table>
                        <div class="d-flex justify-content-end" v-if="!is_more">
                            <button class="btn btn-primary" @click="view_more">View More</button>
                        </div>
                        <div v-else>
                            <router-link :to="{name:'user.event.message',params:{event_code:event_code,event_phone:event_phone}}" class="btn btn-primary">Message</router-link>
                        </div>
                    </div>
                </div>
                <div class="pt-4" v-if="is_more">
                    <h4 class="h4">Client</h4>
                    <div class="row ml-1">
            <div class="card col-4 py-4">
                <div class="d-flex justify-content-between align-items-start">
                    <span class="card-title h2">{{event.client.corporate_name}}</span>
                </div>
                <div>
                    <img src="./assets/images/user.png" class="icon">
                    <span>{{event.client.firstname}} {{event.client.lastname}}</span>
                </div>
                <div>
                    <img src="./assets/images/telephone.png" class="icon">
                    <span>{{event.client.phone}}</span>
                </div>
                <div>
                    <img src="./assets/images/email.png" class="icon">
                    <span>{{event.client.email}}</span>
                </div>
            </div>
        </div>
    </div>
        <div class="pt-4" v-if="is_more">
        <div class="py-2">
            <h4 class="h4 d-inline-block">Employees</h4>
        </div>
        <div class="row ">
            <div class="employee col-4 py-3 mx" v-for="(item,index) in event.employees">
                <div class="card flex-row justify-content-start px-3 py-3">
                    <div class="avatar mr-4">
                        <img :src="item.photo">
                    </div>
                    <div>
                        <p class="card-title h5">{{item.firstname}} {{item.lastname}}</p>
                        <p class="card-subtitle text-secondary">{{item.email}}</p>
                    </div>
                    <div class="scope" :class="'scope-'+item.scope">{{item.scope}}</div>
                </div>
            </div>
        </div>
    </div>
</div>   
            </div>
    `,
    props:['event_code'],
    data(){
        return {
            is_more:false,
            event: {
                photo: null,
                client: {},
            },
            event_phone:null
        }
    },
    methods:{
        get_event() {
            ajax.get(`event/preview/${this.event_code}`).then(res=>{
                if (res.status === 200){
                    this.event = res.data.data;
                }
            })
        },
        view_more(){
            this.event_phone = window.prompt('Verification this event phone');
            ajax.get(`event/preview/${this.event_code}/${this.event_phone}`).then(res=>{
                if (res.status === 200){
                    this.is_more = true;
                    this.event = res.data.data;
                }
            })
        }
    },
    mounted() {
        this.get_event();
    }
}